%h2== #{@bucket.name}
.left
  .padding
    %h3
      .action
        = link_to('create setting', popup_new_bucket_settings_url(@bucket), :rel => 'facebox')
      == All Settings in #{@bucket.name} bucket

    - form_for @bucket, :url => bucket_url(@bucket) do |f|
      Search for settings to add to bucket:
      = f.text_field :new_setting_name, :class => 'text inline'
      / = f.submit 'Add setting', :class => 'button'

    #errors{ :style => 'display: none; background: #ffc; margin: 10px 0; padding: 10px; color: red;' }
    #all-settings-wrapper
      = render :partial => 'settings_list', :locals => { :settings => @bucket.settings }

.right
  .padding
    %h3 Client Preview
    %form
      - Axis.prioritized.each_with_index do |a, i|
        %select.axis{ :name => "context_axis[#{a.to_param}]" }
          %option{ :selected => 'selected' }
          - a.axis_values.each do |av|
            %option= av.name
        = "." if i < Axis.count - 1
      = link_to('preview', '#', :id => 'preview-context')

- content_for :javascript do
  == $('#bucket_new_setting_name').autocomplete({
  ==   match: function(typed) { return this.name.match(new RegExp(typed, "i")); },
  ==   ajax: '/buckets/auto_complete_for_setting_name',
  ==   insertText: function(setting) { return setting.name; },
  ==   template: function(setting) { return "<li><span class='name'>" + setting.name + "</span> &raquo; <span class='value'>" + setting.value + "</span></li>"; } 
  == });

  == $('#preview-context').click(function() {
  ==   var url = "/buckets/#{@bucket.name}/";
  ==   $('select.axis').each(function(i) {
  ==     url += (this.value == "" ? "*" : this.value) + "/"
  ==   });
  ==   $.facebox({ ajax: url });
  == });
